<!doctype html>
<html>

<head>
    <title>404</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta name="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
    * {
    	margin: 0;
    	padding: 0;
    }
	.error {
	    margin: 10px 0;
	    color: #3498db;
	    text-align: left;
	}
	.error .content-center {
		width: 94%;
	    max-width: 1200px;
	    background-color: #fff;
	    margin: 0 auto;
	    padding: 200px 0;
	}
	.error .content-center .error-box {
		width: 94%;
	    max-width: 720px;
	    margin: 0 auto;
	    display: flex;
	    justify-content: space-between;
	    flex-wrap: wrap;
	    align-items: center;
	}
	.error .content-center .error-box .error-info {
	    width: 500px;
	    padding-left: 40px;
	    box-sizing: border-box;
	}
	.error .content-center .error-box .error-info .title {
	    font-size: 100px;
	    line-height: 1;
	}
	.error .content-center .error-box .error-info .desc {
	    font-size: 30px;
	    margin: 20px 0 10px;
	    color: #655244;
	}
	.error .content-center .error-box .error-info .time {
	    color: #666;
	    font-weight: normal;
	}
	.el-button {
	    display: inline-block;
	    line-height: 1;
	    white-space: nowrap;
	    cursor: pointer;
	    background: #fff;
	    border: 1px solid #dcdfe6;
	    color: #606266;
	    -webkit-appearance: none;
	    text-align: center;
	    box-sizing: border-box;
	    outline: 0;
	    margin: 0;
	    -webkit-transition: .1s;
	    transition: .1s;
	    font-weight: 500;
	    padding: 12px 20px;
	    font-size: 14px;
	    border-radius: 4px;
	}
	.error .content-center .error-box .btn-back, .error .content-center .error-box .btn-reload {
	    background-color: #fff;
	    color: #3498db;
	    border-color: #3498db;
	    margin-top: 20px;
	    width: 180px;
	    height: 50px;
	    -webkit-transition: .3s;
	    -o-transition: .3s;
	    transition: .3s;
	}
	a {
		text-decoration: none;
		color: #3498db;
		-webkit-transition: color .3s;
		-o-transition: color .3s;
		transition: color .3s;
	}
	.error .content-center .error-box .btn-back:hover {
		background: #3498db;
	}
	.error .content-center .error-box .btn-back:hover a {
		color: #fff;
	}
	</style>
</head>

<body>
    <div class="error">
        <div class="content-center">
            <div class="error-box">
            	<img src="/static/images/404.png" width="196">
                <div class="error-info">
                    <h1 class="title">404</h1>
                    <p class="desc">éžå¸¸æŠ±æ‰! æ‚¨è®¿é—®çš„é¡µé¢ä¸å˜åœ¨ã€‚</p>
                    <h3 class="time">å°†åœ¨ <span id="time">6</span> ç§’åŽè‡ªåŠ¨è·³è½¬åˆ°é¦–é¡µ</h3>
                    <button type="button" class="el-button btn-back el-button--default"><a href="/">è¿”å›žé¦–é¡µ</a></button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    	var secs =6; //å€’è®¡æ—¶çš„ç§’æ•°
    	var URL;
    	function Load(url){
    		URL =url;
    		for(var i=secs;i>=0;i--){
    			window.setTimeout('doUpdate(' + i + ')', (secs-i) * 1000);
    		}
    	}
    	function doUpdate(num){
    		document.getElementById('time').innerHTML = num;
    		if(num == 0){
    			window.location=URL;
    		}
    	}
    	Load('/');
    </script>
</body>

</html>